<template>
    <view style="width: 750rpx;display: flex;align-items: center;flex-direction: column;">
        <view class="materialContainer">
            <template v-for="(item,index) in materialList">
                <view v-if="item.isShow" class="item" :key="index" @click="gotoPage(item)">
                    <view class="left">
                        <image class="icon" :src="item.icon" mode=""></image>
                        {{item.title}}
                    </view>
                    <image class="right" src="/pages/shop/static/image/btn_more.png" mode=""></image>
                </view>
                <view v-if="item.isShow" class="line">

                </view>
            </template>
        </view>
    </view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null


    export default {
        data() {
            return {
                materialList: [
                  {
                    url: '/pages/shop/material/project/sandbox',
                    type: 'MATERIALS_SAND_TABLE',
                    isShow: false,
                    icon: '/pages/shop/static/image/icon_shapanwuliao.png',
                    title: '沙盘物料'
                  },{
                        url: '/pages/shop/material/project/unitType',
                        type: 'MATERIALS_HOUSE_TYPE',
                        isShow: false,
                        icon: '/pages/shop/static/image/icon_huxingtu.png',
                        title: '户型图',
                    },
                    {
                        url: '/pages/shop/material/project/building',
                        type: 'MATERIALS_BUILD_INFO',
                        isShow: false,
                        icon: '/pages/shop/static/image/icon_loupanxinxi.png',
                        title: '楼盘信息'
                    },
                    {
                        url: '/pages/shop/material/project/buildingAlbum',
                        type: 'MATERIALS_BUILD_IMAGE',
                        isShow: false,
                        icon: '/pages/shop/static/image/icon_loupantupian.png',
                        title: '楼盘相册'
                    },
                    {
                        url: '/pages/shop/material/project/buildingVideo',
                        type: 'MATERIALS_BUILD_VEDIO',
                        isShow: false,
                        icon: '/pages/shop/static/image/icon_loupanshipin.png',
                        title: '楼盘视频'
                    },

                    {
                        url: '/pages/shop/material/project/traffic',
                        type: 'MATERIALS_PERIPHERY_TYPE',
                        isShow: false,
                        icon: '/pages/shop/static/image/icon_zhoubianpeitao.png',
                        title: '周边配套'
                    },
                    // {
                    //     url: '/pages/shop/material/project/myNote',
                    //     type: 'MATERIALS_NOTE',
                    //     isShow: false,
                    //     icon: '/pages/shop/static/image/icon_daogoubiji.png',
                    //     title: '导购笔记'
                    // },
                ]
            };
        },

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },

        onLoad(options) {
            that = this;
            that.getProjectMaterials()
        },
        onShow() {

        },
        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

            gotoPage(item) {
                uni.navigateTo({
                    url: item.url
                })
            },


            getProjectMaterials() {
                let that = this
                api.getProjectMaterials({
                    param: {

                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        for (var key in res.data){
                            for (var i in that.materialList){
                                if (that.materialList[i].type == key){
                                    if (res.data[key]==1){
                                        that.materialList[i].isShow = true
                                    }else{
                                        that.materialList[i].isShow = false
                                    }
                                }
                            }
                        }
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #F3F3F3;
    }

    .materialContainer {
        width: 714rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-top: 32rpx;

        .item {
            height: 116rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                display: flex;
                align-items: center;
                font-size: 30rpx;
                color: #333333;

                .icon {
                    width: 56rpx;
                    height: 56rpx;
                    margin-right: 30rpx;
                }
        
   }

            .right {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .line {
            height: 1px;
            width: 100%;
            background-color: #F3F3F3;
    
   }
    }
</style>
